<template>
  <div>
    <div class="rightcon">
      <!-- 房间列表 -->
      <div
        v-if="act == 'hot_rooms'"
        class="hot_rooms playing_songs my_songs search_songs"
      >
        <h3>
          热门房间列表
          <div class="btn" @click="change(10269)" type="primary">我的房间</div>
        </h3>

        <div class="search">
          <el-input
            @keyup.enter="getsongs"
            clearable
            v-model="input"
            placeholder="请输入房间ID"
          ></el-input>
          <el-button @click="toroom" type="primary">搜索</el-button>
        </div>
        <ul>
          <li
            @click="change(item.room_id)"
            v-for="item in hotrooms"
            :key="item.room_id"
          >
            <div class="top">
              <div class="left">
                <i class="el-icon-headset"></i>
                <h3>{{ item.room_name }}</h3>
              </div>
              <p>ID: {{ item.room_id }}</p>
            </div>

            <div class="bottom-con">
              <img :src="item.user_head" alt="" />
              <div class="right">
                <div class="one">
                  <span class="online">({{ item.room_online }})</span>
                  <span class="name">{{ decodeURI(item.user_name) }}</span>
                </div>
                <p>
                  {{ item.room_notice == "" ? "暂无介绍" : item.room_notice }}
                </p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- <home></home> -->
  </div>
</template>

<script>
import $ from "jquery";
import {
  search,
  songList,
  mySongList,
  addSong,
  hotRooms,
} from "@/api/search/index";
import home from "@/views/home";
export default {
  components: {
    home,
  },

  data() {
    return {
      roomdata: [],
      messagelist: [],
      inputtext: "",
      sortdata: [
        {
          path: "search_songs",
          icon: "el-icon-s-claim",
          title: "点歌",
        },
        {
          path: "playing_songs",
          icon: "el-icon-s-management",
          title: "已点",
        },
        {
          path: "my_songs",
          icon: "el-icon-s-order",
          title: "歌单",
        },
        {
          path: "hot_rooms",
          icon: "el-icon-s-home",
          title: "房间",
        },
      ],
      input: "",
      songslist: [],
      alreadylist: [],
      mysongslist: [],
      hotrooms: [],
      act: "hot_rooms",
    };
  },

  created() {
    // 获取热门房间
    hotRooms({
      access_token: localStorage.getItem("access_token"),
      plat: "pc",
      version: 10000,
    }).then((res) => {
      console.log(res);
      this.hotrooms = res.data;
    });
  },

  mounted() {},

  methods: {
    isshow() {
      if (this.act == "hot_rooms") {
        this.act = "";
      } else if (this.act == "") {
        this.act = "hot_rooms";
      }
      console.log("object");
    },
    // 跳转到目标ID的房间
    toroom() {
      console.log(this.input);
      var index = false;
      index = false;
      this.hotrooms.forEach((el) => {
        if (el.room_id == this.input) {
          index = true;
        } else {
        }
      });
      console.log(index);
      if (index) {
        localStorage.setItem("room_id", this.input);
        this.$router.go(0);
      } else {
        this.$notify({
          title: "查找失败",
          message: "暂无查询此房间",
          type: "error",
        });
        this.input = "";
      }
    },
    // 左侧切换右侧
    change(id) {
      console.log(id);
      localStorage.setItem("room_id", id);
      this.$router.go(0);
    },
    // 搜索歌曲
    getsongs() {
      search({
        keyword: this.input,
        access_token: localStorage.getItem("access_token"),
        plat: "pc",
        version: 10000,
      }).then((res) => {
        console.log(res);
        this.songslist = res.data;
      });
    },
    // 获取已点歌曲
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='less'>
.rightcon {
  // 搜索歌曲列表
  .search_songs {
    border-radius: 0 20px 20px 0;
    width: 360px;
    height: 800px;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 22;
    h3 {
      width: 320px;
      text-align: left;
      padding: 10px 20px;
      background-color: #fff;
    }
    .search {
      width: 360px;
      background-color: #fff;
      padding: 20px 0;
      padding-top: 10px;
      .el-input {
        width: 240px;
        margin-right: 10px;
      }
    }
    ul {
      list-style: none;
      width: 340px;
      height: 684px;
      margin: 0 auto;
      padding: 0;
      overflow: auto;
      li {
        cursor: pointer;
        width: 270px;
        background-color: #fff;
        border-radius: 6px;
        margin-top: 10px;
        padding: 0 20px;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        &:last-child {
          margin-bottom: 20px;
        }
        .left {
          text-align: left;
          h3 {
            float: left;
            width: 200px;
            padding: 0;
            font-size: 14px;
            color: #999;
            padding: 6px 0;
          }
          p {
            width: 200px;
            padding: 6px 0;
            float: left;
            font-size: 12px;
          }
        }
        .btn {
          width: 150px;
          height: 30px;
          background-color: #409eff;
          border-radius: 6px;
          text-align: center;
          line-height: 30px;
          color: #fff;
          margin-top: 15px;
          font-size: 12px;
        }
      }
    }
  }

  // 已点区域显示
  .playing_songs {
    border-radius: 0 20px 20px 0;
    ul {
      height: 730px;
      li {
        width: 300px;
        padding: 0 10px;
        .left {
          p {
            padding: 2px 0px;
          }
        }
      }
    }
    h3 {
      .btn {
        float: right;
        font-size: 10px;
        background-color: #666;
        padding: 6px;
        color: #fff;
        border-radius: 4px;
        font-weight: 400;
        cursor: pointer;
      }
    }
    .btns {
      overflow: hidden;
      height: 69px;
      .button {
        width: 60px;
        float: left;
        padding: 3px;
        background-color: #5eadff;
        margin-top: 6px;
        color: #fff;
        font-size: 12px;
        border-radius: 4px;
      }
      .button:first-child {
        margin-top: 10px;
      }
      .button:last-child {
        background-color: #f56c6c;
      }
    }
  }
  // 点过的个
  .my_songs {
    ul {
      li {
        .left {
          p {
            padding: 12px 0;
          }
        }
      }
    }
  }
  // 热门房间
  .rightcon {
    width: 1200px;
    height: 800px;
  }
  .hot_rooms {
    border-radius: 0 20px 20px 0;
    overflow: hidden;
    ul {
      height: 670px;
      li {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .top {
          width: 310px;
          height: 26px;
          display: flex;
          justify-content: space-between;
          padding: 10px 0;
          line-height: 26px;
          margin-bottom: 5px;
          .left {
            width: 200px;
            i {
              margin-top: 5px;
              float: left;
              color: #ff6700;
              font-weight: 600;
            }
            h3 {
              border-radius: 20px;
              width: 160px;
              float: left;
              font-size: 14px;
              padding: 0;
              margin-left: 10px;
              color: #000;
              margin-top: -1px;
            }
          }
          p {
            width: 60px;
            height: 14px;
            padding: 5px;
            line-height: 14px;
            border: 1px solid #eee;
            background-color: rgba(223, 223, 223, 0.6);
            border-radius: 4px;
            font-size: 12px;
            margin-right: 10px;
          }
        }

        .bottom-con {
          display: flex;
          justify-content: space-between;
          margin: 10px 0;
          margin-top: 0;
          img {
            width: 60px;
            height: 60px;
            border-radius: 4px;
          }
          .right {
            text-align: left;
            margin-left: 10px;
            .one {
              padding: 5px 0 10px 5px;
              color: #ff6700;
              .online {
                margin-right: 10px;
              }
              .name {
                line-height: 12px;
                font-size: 14px;
                font-weight: 800;
              }
            }
            p {
              padding: 5px 0 10px 5px;
              width: 200px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
  }
}
</style>